<template>
  <div class="content">
    <div class="gopay-header">
        <mt-header class="mt-header">
            <router-link to="./payment" slot="left">
            <mt-button class="iconfont icon-jiantou3"></mt-button>
            </router-link>
        </mt-header>
        </div>
    <div class="confirm">
      <div class="hd">
        <span class="iconfont icon-fanhui"></span>
        <span>确认支付</span>
        <span></span>
      </div>
      <div class="price">
        <p>￥193.43</p>
      </div>
      <div class="biaoge">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="keyboard">
        <img src="./../assets/jianpan.png" alt="">
      </div>
    </div>
    <div class="confirm-footer">立即支付</div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
  // .content {
  //   background: pink;
  // }
  .gopay-header {
      width: 100%;
      height: 0.44rem;
      background: #ea9c9a;
    .mt-header {
    width: 100%;
    height: 0.44rem;
    background: #ea9c9a;
    color: #fff;
    flex-shrink: 0
    }
  }
  .confirm {
    width: 100%;
    height: 4.1rem;
    margin-top: 1.6rem;
    .hd {
      width: 100%;
      height: 0.5rem;
      background:#DBDBDB;
      @include flexbox();
      @include justify-content(space-between);
      @include align-items();
      padding:0 0.05rem;
      font-size: 0.16rem;
      color:#333;
    }
    .price {
      width: 100%;
      height: 0.35rem;
      margin-top: 0.15rem;
      p {
        text-align: center;
        font-size: 0.24rem;
        line-height: 0.35rem;
      }
    }
    .biaoge {
      width: 100%;
      height: 0.5rem;
      margin: 0.3rem 0;
      ul{
        @include flexbox();
        @include justify-content(space-between);
        @include align-items();
        padding: 0 0.05rem;
        li {
          width: 0.5rem;
          height: 0.5rem;
          border: 0.01rem solid #ccc;
          border-radius:0.04rem;
        }
      }
    }
    .keyboard {
      width: 100%;
      height: 2.04rem;
      img {
        width: 100%;
        height: 100%;

      }
    }
  }
  .confirm-footer {
      width: 100%;
      height: 0.5rem;
      background: #000;
      line-height: 0.5rem;
      text-align: center;
      color: #fff;
      font-size: 0.16rem
  }
  .icon-jiantou3 {
    color: #fff
  }
</style>
